<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../css/element.css">
		<!-- 引入组件库 -->
		<script src="../js/element.js"></script>
		<!-- 引入网络传输库 -->
		<script src="../js/axios.min.js"></script>
		<!-- 处理js对象的工具，可以对js对象进行序列化处理 -->
		<script src="../js/qs.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 顶部搜索栏区域 -->
			<el-form :inline="true" :model="findDish" class="demo-form-inline">
				<el-form-item label="菜品名">
					<el-input v-model="findDish.dishName" placeholder="菜品名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="findDishInfo()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addDishInfo()">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="clearDish()">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 信息列表展示开始 -->
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">			
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="dishId" label="id" width="120">
				</el-table-column>
				<el-table-column prop="dishName" label="菜品名" width="120">
				</el-table-column>
				<el-table-column label="图片" prop="dishImgsrc">
					<template slot-scope="scope">
					  <el-image
						style="width: 80px; height: 80px" 
						:src=${dishImgsrc}        
						fit="cover"                       
					  >
						
						<div slot="error" class="image-slot">
						  <i class="el-icon-picture-outline"></i>
						</div>
					  </el-image>
					</template>
				  </el-table-column>
				<el-table-column prop="dishType" label="类型" width="120">
				</el-table-column>
				<el-table-column prop="dishShow" label="描述" width="120">
				</el-table-column>
				<el-table-column prop="dishPrice" label="价格" width="120">
				</el-table-column>
				<!--  -->
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="updateDishInfo(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="deleteDishInfo(scope.row.dishId)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<el-dialog title="菜品信息" :visible.sync="dialogFormVisible">
				<el-form :model="editDishInfo">
				  <el-form-item label="菜品名" :label-width="formLabelWidth">
					<el-input v-model="editDishInfo.dishName" autocomplete="off"></el-input>
				  </el-form-item>
				  <el-form-item label="类型" :label-width="formLabelWidth">
					<el-input  v-model="editDishInfo.dishType" autocomplete="off"></el-input>
				  </el-form-item>	
				  <el-form-item label="描述" :label-width="formLabelWidth">
					  <el-input v-model="editDishInfo.dishShow" autocomplete="off"></el-input>
					</el-form-item>	
					<el-form-item label="价格" :label-width="formLabelWidth">
					  <el-input v-model="editDishInfo.dishPrice" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="图片路径信息" :label-width="formLabelWidth">
					  <el-input v-model="editDishInfo.dishImgsrc" autocomplete="off"></el-input>
					</el-form-item>   
				</el-form>
				<div slot="footer" class="dialog-footer">
				  <el-button @click="dialogFormVisible = false">取 消</el-button>
				  <el-button type="primary" @click="saveDishInfo()">确 定</el-button>
				</div>
			  </el-dialog>
			
			
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				// 搜索框中需要用到的数据对象
				
				findDish: {
					dishName:""
				},
				// 用户信息列表对象
				tableData: [],
				multipleSelection: [],
				dialogFormVisible: false,
				// 新增对象
				editDishInfo:{
                    dishId:null,
                    dishName:"",
                    dishShow:"",
                    dishScore:"",
                    dishPrice:"",
                    dishIsdelete:0,
                    dishComments:"",
                    dishImgsrc:"",
                    dishType:""
				},
				// dialog框的文本宽度指定
				 formLabelWidth: '120px'
			},
			methods: {
				//清空搜索框
				clearDish:function(){
					this.findDish={}
				},
				// 获取用户列表信息
				findDishInfo: function() {
					// 在axios请求后，与发起请求前指向的this对象是不同的，在方法只能够this指代vue示例，在axios发起请求后的this为window
					// 如果想在axios发起 请求后使用原this对象，可以提前将this保存起来即可
					var that=this
					axios.post("http://localhost:8989/getdishinfo",Qs.stringify(this.findDish)).then(function(response) {
						// 对保存列表信息的数据重新赋值
						that.tableData=response.data
						console.log(that.tableData)
						
					}).catch(function(err) {
						
					})

				},
				// 用户信息列表选择时进行触发
				toggleSelection(rows) {
					if (rows) {
						rows.forEach(row => {
							this.$refs.multipleTable.toggleRowSelection(row);
						});
					} else {
						this.$refs.multipleTable.clearSelection();
					}
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				// 新增方法
				addDishInfo:function(){
					// 将数据对象置空
					this.editDishInfo.dishId=null
                    this.editDishInfo.dishName=""
                    this.editDishInfo.dishShow=""
                    this.editDishInfo.dishScore=""
                    this.editDishInfo.dishPrice=""
                    this.editDishInfo.dishIsdelete=0
                    this.editDishInfo.dishComments=""
                    this.editDishInfo.dishImgsrc=""
                    this.editDishInfo.dishType=""
					// 显示dialog框
					this.dialogFormVisible=true
				},
				// 新增、修改信息保存
				saveDishInfo:function(){
					var that=this
					axios.post("http://localhost:8989/savedishinfo",Qs.stringify(this.editDishInfo)).then(function(response) {
						// 根据响应结果进行判断，若响应的是success
						if(response.data=="success"){
							// 隐藏dialog框
							that.dialogFormVisible=false
							// 重新获取数据
							that.findDishInfo()
						}
						
						
					}).catch(function(err) {
						
					})
					
				},
				// 修改用户信息的方法
				updateDishInfo:function(dishinfo){
					// 信息回显
					this.editDishInfo=dishinfo
					// 打开弹框
					this.dialogFormVisible=true
				},
				deleteDishInfo:function(dishid){
					console.log(dishid)
					this.editDishInfo.dishId=dishid
					this.editDishInfo.dishIsdelete=1
					this.saveDishInfo()
					
				}
				
			},
			mounted(){
					this.findDishInfo()
				}
		
		})
	</script>
</html>
